<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>导行栏下拉</title>
    <script src="js/jquery-3.2.1.min.js">
    </script>
    <script src="js/main.js"></script>
    <script>
        $(function() {
            $(".havsub").each(function() {
                $(this).find("ul").css("display", "none");
                //鼠标进来后，下拉框出来
                $(this).mouseenter(function() {
                        $(this).find("ul").css("display", "block");
                        $(this).children("a").css("background-color", "#730b1a");
                    })
                    //鼠标移走后，下拉框消失
                $(this).mouseleave(function() {
                    $(this).find("ul").css("display", "none");
                    $(this).children("a").css("background-color", "brown");
                });

            })
        })
    </script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul li {
            list-style-type: none;
        }
        
        #nav {
            margin-top: 0px;
            width: 100%;
            height: 50px;
            background-color: brown;
            text-align: center;
            z-index: 1;
            position: relative;
        }
        
        #nav>ul {
            height: 50px;
            margin: 0px auto;
            width: 80%;
        }
        
        .havsub {
            width: 13%;
            float: left;
            line-height: 50px;
            font-size: 20px;
            background: url("images/nav_jt.png") right center no-repeat;
            position: relative;
            z-index: 1;
        }
        
        .havsub a {
            color: #fff;
            text-decoration: none;
            display: block;
        }
        
        .havsub li {
            border: 1px solid #999;
            background-color: #fff;
        }
        
        .havsub li a {
            line-height: 50px;
            font-size: 20px;
            color: #333;
            display: block;
        }
        
        .havsub ul li a:hover {
            color: red;
        }
        
        #top,
        #main {
            margin: 0px auto;
            width: 80%;
            position: relative;
        }
        
        #img {
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="top">
        <img src="images/top.png">
    </div>
    <div id="nav">
        <ul id="nav_bar">
            <li class="havsub">
                <a href="javascript:void(0)">网站首页</a>
                <ul>
                    <li>
                        <a href="#">学校简介</a>
                    </li>
                    <li>
                        <a href="">学校章程</a>
                    </li>
                    <li>
                        <a href="">学校领导</a>
                    </li>
                    <li>
                        <a href="">学校校训</a>
                    </li>
                </ul>
            </li>
            <li class="havsub">
                <a href="#">学校概况</a>
                <ul>
                    <li>
                        <a href="#">学校简介</a>
                    </li>
                    <li>
                        <a href="">学校章程</a>
                    </li>
                    <li>
                        <a href="">学校领导</a>
                    </li>
                    <li>
                        <a href="">学校校训</a>
                    </li>
                </ul>
            </li>
            <li class="havsub">
                <a href="#">新闻中心</a>
                <ul>
                    <li>
                        <a href="#">学校通知</a>
                    </li>
                    <li>
                        <a href="">学校新闻</a>
                    </li>
                    <li>
                        <a href="">学校领导</a>
                    </li>
                    <li>
                        <a href="">学校校训</a>
                    </li>
                </ul>
            </li>
            <li class="havsub">
                <a href="#">人才培养</a>
                <ul>
                    <li>
                        <a href="#">人才介绍</a>
                    </li>
                    <li>
                        <a href="">学校章程</a>
                    </li>
                    <li>
                        <a href="">学校领导</a>
                    </li>
                    <li>
                        <a href="">学校校训</a>
                    </li>
                </ul>
            </li>
            <li class="havsub">
                <a href="#">科学研究</a>
                <ul>
                    <li>
                        <a href="#">学校简介</a>
                    </li>
                    <li>
                        <a href="">学校章程</a>
                    </li>
                    <li>
                        <a href="">学校领导</a>
                    </li>
                    <li>
                        <a href="">学校校训</a>
                    </li>
                </ul>
            </li>

            <li class="havsub">
                <a href="#">公共服务</a>
                <ul>
                    <li>
                        <a href="# ">学校简介</a>
                    </li>
                    <li>
                        <a href=" ">学校章程</a>
                    </li>
                    <li>
                        <a href=" ">学校领导</a>
                    </li>
                    <li>
                        <a href=" ">学校校训</a>
                    </li>
                </ul>
            </li>
            <li class="havsub ">
                <a href="# ">教学资源</a>
            </li>
        </ul>
    </div>

    <div id="main">
        <div id="img">
            <img src="images/main.png">
        </div>

    </div>
</body>

</html>